<template>
	<div>
		<h1 class="basic" :class="str">{{msg}}</h1>
		<button @click="str = 'happy' ">开心</button>
		<button @click="str = 'sad' ">悲伤</button>
		<button @click="str = 'normal' ">还行吧</button>
		<hr>
		<h1 class="basic" :class="obj">{{msg}}</h1>
		<button @click="obj.atguigu1 = !obj.atguigu1">应用/取消 atguigu1</button>
		<button @click="obj.atguigu2 = !obj.atguigu2">应用/取消 atguigu2</button>
		<button @click="obj.atguigu3 = !obj.atguigu3">应用/取消 atguigu3</button>
		<hr>
		<h1 class="basic" :class="arr">{{msg}}</h1>
		<input type="text" @keyup.enter="addClass" v-model="keyword">
	</div>
</template>

<script>
	export default {
		name:'App',
		data() {
			return {
				keyword:'',
				msg:'欢迎来到尚硅谷学习!',
				str:'',
				obj:{
					atguigu1:false,
					atguigu2:false,
					atguigu3:false
				},
				arr:[]
			}
		},
		methods: {
			addClass(){
				this.arr.push(this.keyword)
			}
		},
	}
</script>

<style>
	.basic{
		width: 400px;
		height: 100px;
		border: 1px solid black;
	}

	/* 三种心情，三选一 */
	.happy{
		border: 4px solid red;;
		background-color: rgba(255, 255, 0, 0.644);
		background: linear-gradient(30deg,yellow,pink,orange,yellow);
	}
	.sad{
		border: 4px dashed black;
		background-color: gray;
	}
	.normal{
		border: 4px solid deepskyblue;
		background-color: skyblue;
	}

	/* 三个样式，随意选择，可以同时存在 */
	.atguigu1{
		background-color: yellowgreen;
	}
	.atguigu2{
		text-shadow:2px 2px 10px red;
	}
	.atguigu3{
		border-radius: 20px;
	}
</style>